<template>
<!-- 积分流水 -->
<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
  <view class="balance" v-else>
    <view class="page_top" :style="{ 'background': topNav ? 'white' : 'transparent', 'z-index': 199 }">
			<top-status></top-status>
			<view class="tabsBack">
				<view @click="goBack()" class="blackbox">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718776913451430.png"
							mode="widthFix" class="backimg"></image>
					<!-- <uni-icons :color="topNav ? 'black' : 'lightgray'" type="left" size="30"></uni-icons> -->
				</view>
				<view class="topTitle">{{ '积分明细' }}</view>
			</view>
	</view>
    <view class="bgimg">
            <view class="rulebox" @click="isscore = true">规则</view>
            <view class="scorebox">
                <image class="GoldCoinimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png"></image>
                <view class="userscore">{{userNums.Score?userNums.Score:'0'}}</view>
                <!-- <image class="rArrow" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777830355456.png"></image> -->
            </view>
            <view class="midbox">
                <!-- <view class="midbtn" @click="nav_to('/pages/court/score_Redeem')">
                    <view class="midtitle" >提现</view>
                    <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17187788913361338.png" class="midimg"></image>
                </view> -->
                <view class="midbtn" @click="nav_to('/pages/court/score_Redeem')">
                    <view class="midtitle">兑换</view>
                    <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17187788913361338.png" class="midimg"></image>
                </view>
            </view>
            <view class="bg">
                <view class="navbox">
                    <view class="nav" v-for="(item,index) in nav" :key="index">
                        <view class="navtitle" :class="isdown == index?'color4':''" @click="selNav(index)">{{item}}</view>
                        <view class="downline" v-if="isdown == index"></view>
                    </view>
                    
                </view>
                <view class="item row" v-for="(item,index) in list" :key="index">
                    <view class="col_18">
                        <view class="type">{{item.Type}}</view>
                        <view class="time">{{ getDataTime(item.CreateTime)}}</view>
                    </view>
                    <view class="col_6 f1  num" :class="{'add':(item.Score > 0),'reduce':(item.Score < 0)}">
                        {{item.Score}}
                    </view>
                    <view class="downborder">
                        
                    </view>
                </view>
                <block v-if="list.length == 0">
                    <image class="kongimg"  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png"></image>
                    <view class="kongtext">暂无数据</view>
                </block>
                
                <!-- <u-empty mode="list" :show="Array.isArray(list) && list.length == 0" iconSize="32" text="暂无数据"></u-empty> -->
        </view>
    </view>

    <!-- 积分规则 -->
        <view class="showrule" v-if="isscore">
			<view class="Rulebox2">
				<view class="ruletitle_2">{{ruletitle}}</view>
				<view class="ruletitle_3">{{ruletext}}</view>
				<!-- <view class="ruletitle_3">2、每个新用户进入小程序之后，必须要上传至少一张本人运动相关照片</view> -->
				<!-- <view class="ruletitle_3">3、新用户照片通过审核后，通过消息栏的官方消息发送新用户邀请成功的信息，并且在积分详情页有显示</view> -->
				<view class="Close2" @click=" isscore = false">知道了</view>
			</view>
		</view>
  </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
    components: {
		topStatus,
	},
    data(){
        return{
            isscore:false,
            ruletitle:'',
            ruletext:'',
            isdown:0,
            load:false,
            list:[],
            userNums:{},
            topNav: false,//吸顶
            nav:['收支明细','兑换记录'],
            PageIndex:1,
            PageSize:15,
            type:'',
            isMore:false,
        }
    },
    onPageScroll: function (e) { //nvue暂不支持滚动监听，可用bindingx代替
        if (e.scrollTop > 210) {
            this.topNav = true
        } else {
            this.topNav = false
        }
    },
    onLoad(){
        // this.getTask()
        this.GetContent()
    },
    onShow(){
        this.init();
    },
     onPullDownRefresh(){
        this.onRefresh()
    },
    onReachBottom(){
        this.scrolltolower()
    },
    methods:{
         //积分规则
        async GetContent(){
            let res = await this.$api.post('Content/GetContent',{
                    ID:1
            })
            if(res.code == 0){
                this.ruletitle = res.data.Title
                this.ruletext = res.data.Content
            }
            console.log(this.ruletext,'111');
        },
        onRefresh() {
				this.PageIndex = 1;
				this.load = false;
				this.list=[]
				this.getList();
		},
        //滚动到底部触发
			async scrolltolower() {
				if (this.isMore) {
					this.PageIndex++;
					this.getList();
				}else{
					// this.$pv.msg('到底啦~')
				}
			},
        goBack(){
            uni.navigateBack();
        },
        selNav(index){
            this.isdown = index
            if(index == 0){
                this.type = ''
                this.list = []
                this.PageIndex = 1
                this.getList()
            }else{
                this.type = '兑换'
                this.list = []
                this.PageIndex = 1
                this.getList()
            }
        },
        setCurrIndex(ind){
            this.currIndex = ind;
        },
        async getList(){
            
            let res = await await this.$api.post('SaleChannel/GetUserScoreLog',{
                PageIndex:this.PageIndex,
                PageSize:this.PageSize,
                Type:this.type,
            });
            if(res.code == 0){
                uni.stopPullDownRefresh()
            }
            this.list = this.list.concat(res.data);
            this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
            this.load = true;
        },
        async getSaleChannelDetail() {
				let res = await this.$api.post('/SaleChannel/SaleChannelDetail', {
					CompanyID: 6003
				});
				this.userNums = res.data;

			},
        async init(){
            this.list = []
            this.getList();
            this.getSaleChannelDetail()
        }
        
    },
    computed:{
            getDataTime(){
                return l => {
                    // console.log(l);
                    let d = new Date(l);
                    let timestamp = d.getTime();
                    return this.$u.date(timestamp,'yyyy年mm月dd日 hh时MM分');
                }
            }
    },
}
</script>

<style lang="scss">
.page_top {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	box-sizing: border-box;
	transition: 0.3s all;
}
.showrule{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		}

.Rulebox2{
            position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
			height: fit-content;
			background: linear-gradient( 180deg, #FEEDED 0%, #FFFFFF 100%);
			border-radius: 32rpx;
			border: 4rpx solid #FFFFFF;
			padding: 48rpx;
			box-sizing: border-box;
            .ruletitle_2{
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
				margin-bottom: 32rpx;
			}
			.ruletitle_3{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 16rpx;
                white-space: pre-wrap;
                max-height: 650rpx;
                overflow: auto;
			}
			.Close2{
				width: 510rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient( 98deg, #FE6F5D 0%, #FE2851 100%);
				border-radius: 48rpx;
				margin-top: 32rpx;
			}
        }
.tabsBack {
	height: 44px;
	padding-left: 32rpx;
	display: flex;
	align-items: center;
	z-index: 999;

	.topTitle {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
        flex: 1;
        text-align: center;
	}

	.blackbox {
		// width: 52rpx;
		// height: 52rpx;
		// display: flex;
		// align-items: center;
        .backimg{
            width: 36rpx;
            height: 36rpx;
            vertical-align: middle;
        }
	}
}
.bgimg{
    background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718776593916474.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 682rpx;
    position: relative;
    // overflow: hidden;
    padding-top: 260rpx;
    box-sizing: border-box;
    .rulebox{
        position: absolute;
        right: 0;
        top: 224rpx;
        width: 104rpx;
        height: 48rpx;
        text-align: center;
        line-height: 48rpx;
        color: #FF6957;
        font-size: 28rpx;
        background: rgba(255,255,255,0.8);
        border-radius: 200rpx 0rpx 0rpx 200rpx;
    }
    .scorebox{
        width: 300rpx;
        display: flex;
        align-items: center;
        margin-left: 24rpx;
        .GoldCoinimg{
            width: 64rpx;
            height: 64rpx;
            display: block;
        }
        .userscore{
            font-size: 72rpx;
            font-weight: bold;
            color: #553526;
        }
        .rArrow{
            width: 32rpx;
            height: 32rpx;
            margin-left: 8rpx;
        }
    }
    .midbox{
        display: flex;
        align-items: center;
        margin-left: 24rpx;
        margin-top: 42rpx;
        .midbtn{
            width: 152rpx;
            height: 60rpx;
            background: #FFFFFF;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 24rpx;
            .midtitle{
                font-size: 28rpx;
                color: #333333;
                margin-right: 8rpx;
            }
            .midimg{
                width: 8rpx;
                height: 24rpx;
            }
        }   
    }
}
.balance{
    padding-bottom: 80rpx;
}
.bg{
    // width: 702rpx;
    background: #fff;
    border-radius: 32rpx;
    margin: 0 auto;
    margin-top: 24rpx;
    // padding-top: 48rpx;
    padding: 50rpx 0;
    .kongimg{
        width: 200rpx;
        height: 200rpx;
        margin: 0 auto;
        display: block;
        margin-top: 20rpx;
    }
    .kongtext{
        font-size: 28rpx;
        color: #999999;
        text-align: center;
    }
    .navbox{
        display: flex;
        align-items: center;
        justify-content: space-around;
        .nav{
                text-align: center;
            .navtitle{
                font-size: 36rpx;
                font-weight: bold;
                color: #999999;
                margin-bottom: 8rpx;
            }
            .color4{
                color: #333333 !important;
            }
            .downline{
                width: 56rpx;
                height: 8rpx;
                background: #FD5C2C;
                border-radius: 4rpx;
                margin-left: 50%;
                transform: translateX(-50%);
            }
        }
        
    }
}
.mt30{
    margin-top: 30rpx;
}
.c_sed{
    color: #FDEFBB;
}
.item{
    height: 140rpx;
    align-items: center;
    // border-bottom: 1px solid #333;
    .col_18{
        box-sizing: border-box;
        padding-left: 20rpx;
        .time{
            margin-top: 20rpx;
            font-size: 24rpx;
            color: #999999;
        }
        .type{
            font-size: 32rpx;
            color: #333333;
        }
    }
    .col_6{
        text-align: right;
        padding-right: 20rpx;
        box-sizing: border-box;
    }
   .downborder{
        width: 688rpx;
        height: 2rpx;
        border-bottom: 1rpx solid #E4E4E4;
        margin:  0 auto;
   }
}
.add{
    font-size: 28rpx;
    color: #E3AD28;
    &:before{
        content: "+";
    }
}
.reduce{
    color: #EF4034;

}
</style>